import { Modal, Pagination } from 'antd'
import itemBg from '@/assets/CompanyDevelopment/light_itemBg.png'
import itemIcon from '@/assets/CompanyDevelopment/light_itemIcon.png'
import { useCallback, useEffect, useState } from 'react'
import { initPageType, usePageChange } from '@hs-admin/utils'
import { postCompanyInfoDetailRankQueryRankPageList } from '@/api/companyDetail/CompanyDevelopment.ts'
import './TopList.css'

const initPage1: initPageType = {
  current: 1,
  total: 0,
  pageSize: 8,
  morePageOptions: {
    showSizeChanger: false,
    showQuickJumper: true,
    showTotal: (total: number) => `共 ${total} 条数据`,
    pageSizeOptions: [8]
  }
}

const initPage2: initPageType = {
  current: 1,
  total: 0,
  pageSize: 10,
  morePageOptions: {
    showSizeChanger: true,
    showQuickJumper: true,
    showTotal: (total: number) => `共 ${total} 条数据`,
    pageSizeOptions: [10, 20, 50]
  }
}

const colorList = ['#A77710', '#2A6138', '#A35335', '#2AA69B']

const TopList = ({ companyCode }: { companyCode: string }) => {
  const [topListData, setTopListData] = useState([])
  const [count, setCount] = useState('')
  const [modalConfig, setModalConfig] = useState({
    show: false,
    title: '变更详情',
    data: {},
    onClose: () => {
      setModalConfig({ ...modalConfig, show: false })
    }
  })
  const [detailData, setDetailData] = useState([])
  const [detailShow, setDetailShow] = useState(true)

  const goModal = (row) => {
    setModalConfig({ ...modalConfig, show: true, title: row.rankName, data: row })
  }

  const getList = useCallback(
    async (page: number, pageSize: number) => {
      const res = await postCompanyInfoDetailRankQueryRankPageList({
        companyCode,
        current: page,
        pageSize,
        rankName: ''
      })
      setTopListData(res.list ?? [])
      setCount(res.total ?? '')
      return res.total ?? 0
    },
    [companyCode]
  )

  const { pagination: listPagination, resetPageAndTriggerRequest: listResetPageAndTriggerRequest } = usePageChange(initPage1, getList)

  useEffect(() => {
    listResetPageAndTriggerRequest()
  }, [listResetPageAndTriggerRequest])

  const getDetailList = useCallback(
    async (page: number, pageSize: number) => {
      setDetailShow(false)
      const res = await postCompanyInfoDetailRankQueryRankPageList({
        companyCode: '',
        current: page,
        pageSize,
        rankName: modalConfig.title
      })
      setDetailData(res.list ?? [])
      setDetailShow(true)
      return res.total ?? 0
    },
    [modalConfig.title]
  )

  const { pagination: detailPagination, resetPageAndTriggerRequest: detailResetPageAndTriggerRequest } = usePageChange(initPage2, getDetailList)

  useEffect(() => {
    detailResetPageAndTriggerRequest()
  }, [detailResetPageAndTriggerRequest])

  const detailCount = (detailPagination.current - 1) * detailPagination.pageSize

  const showPart = topListData.length > 0

  return (
    <>
      {showPart ? (
        <div id="上榜榜单" className="topList_wrap" data-count={count}>
          <div className="title">上榜榜单{count}</div>
          <div className="list_wrap">
            {topListData.map((item) => (
              <div key={item.id} className="item" style={{ background: `url(${itemBg}) 100% 100% no-repeat` }} onClick={() => goModal(item)}>
                <img src={itemIcon} alt="" />
                <div className="name">{item.rankName}</div>
              </div>
            ))}
          </div>
          <div className="page_wrap">
            <Pagination {...listPagination} />
          </div>

          <Modal
            title={<span className="text-20px font-bold color-#333333">{modalConfig.title}</span>}
            open={modalConfig.show}
            width={1024}
            onCancel={() => setModalConfig({ ...modalConfig, show: false })}
            footer={null}>
            <div className="modal_wrap">
              <div className="modal_info">
                <span className="modal_info_item">
                  <span>来源：</span>
                  {modalConfig.data.infoSource || '-'}
                </span>
                <div style={{ marginBottom: 6 }}></div>
                <span className="modal_info_item" style={{ marginRight: 32 }}>
                  <span>榜单类型：</span>
                  {modalConfig.data.rankType || '-'}
                </span>
                <span className="modal_info_item">
                  <span>发布日期：</span>
                  {modalConfig.data.updateTime?.replace('T', '  ') || '-'}
                </span>
              </div>
              <div className="modal_list">
                <div className="modal_list_columns">
                  <div className="modal_list_columns_ranking" style={{ width: 80, marginRight: 50 }}>
                    排名
                  </div>
                  <div>企业名称</div>
                </div>
                <div className={detailShow ? 'modal_list_data' : ''}>
                  {detailShow &&
                    detailData.map((item, index) => (
                      <div key={item.id} className="modal_list_item">
                        <div className="modal_list_data_ranking" style={{ width: 80, marginRight: 50 }}>
                          <span
                            className={
                              // 这是在干什么，怎么可能等于0？
                              index + 1 + detailCount === 0
                                ? 'one'
                                : index + 1 + detailCount === 1
                                  ? 'two'
                                  : index + 1 + detailCount === 2
                                    ? 'three'
                                    : index + 1 + detailCount > 98
                                      ? 'sp1'
                                      : ''
                            }>
                            {index + 1 + detailCount}
                          </span>
                        </div>
                        <div className="modal_list_data_name">
                          {item.iconurl ? (
                            <img className="modal_list_logo_img" src={item.iconurl} alt="" />
                          ) : (
                            <div className="modal_list_logo" style={{ background: colorList[Math.floor(Math.random() * 4)] }}>
                              {item.companyName?.slice(0, 4)}
                            </div>
                          )}
                          <div className="modal_list_companyName">{item.companyName || '-'}</div>
                        </div>
                      </div>
                    ))}
                </div>
              </div>
              <div className="modal_page_wrap">
                <Pagination {...detailPagination} />
              </div>
            </div>
          </Modal>
        </div>
      ) : null}
    </>
  )
}

export default TopList
